<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>TMS实验</title>
    <link rel="icon" href="static/images/favicon.png" type="image/x-icon">



    <style>
        .center {text-align: center}

        /* 重置默认边距 */
        body {
            margin: 0;
            padding: 20px;
        }

        /* 进度条容器 */

        .progress-container {
          width: 95%; /* 自定义宽度 */
          margin: auto; /* 上下边距 20px，水平居中 */
          height: 30px;
          background-color: #eee;
          border-radius: 15px;
          position: relative;
          overflow: hidden;
        }


        /* 进度条填充部分 */
        .progress-bar {
            height: 100%;
            width: 0%; /* 初始进度值 */
            background-color: #4CAF50;
            transition: width 0.3s ease;
            position: relative;
        }

        /* 进度文字样式 */
        .progress-text {

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-family: Arial, sans-serif;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            z-index: 1;
        }
        .progress-text2 {

            position: absolute;
            right: 0%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-family: Arial, sans-serif;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            z-index: 1;
        }
    </style>
    <script src="static/sweetalert-master/docs/assets/sweetalert/sweetalert.min.js"></script>
</head>
<body class="center">
    <img id="img_id" src="/static/images/rest.svg" width="95%">
    <img id="end_id" src="/static/images/end.svg" width="95%" hidden>


    <div class="progress-container">
        <div id="progress_text_id", class="progress-text">0 % </div>
        <div id="progress_bar_id", class="progress-bar"></div>
        <div id = "time_display", class="progress-text2">0小时 0分钟 0秒</div>
    </div>



</body>
    <script src="static/js/jquery-3.3.1.min.js" ></script>
    <script src="static/js/socket.io.js"></script>

    <script type="text/javascript" charset="utf-8">


        var time_count_timer;

        function startTimer() {
            var startTime = new Date().getTime();
            var currentTime=0
            var timeDifference=0
            var hours=0
            var minutes=0
            var seconds=0
            var percentage=0

            time_count_timer = setInterval(function() {
                currentTime = new Date().getTime();
                timeDifference = currentTime - startTime;

                hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
                seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
                $("#time_display").text(hours + "小时 " + minutes + "分钟 " + seconds + "秒");

                percentage = Math.floor((timeDifference/((10*60+40)*1000))*100);
                $("#progress_text_id").text(percentage+' %');

                $("#progress_bar_id").css("width", percentage+"%");


                if (percentage==100){
                    clearInterval(time_count_timer);
                    img_path = "/static/images/end.svg";
                    $("#img_id").attr("src", img_path);

                    swal({title:"开始TMS刺激"}).then(function () {
                        location.reload();
                    });
                }

            }, 1000);

        }


        var socket = io();



        function end_01() {
            $("#Neutrality_04").hide();
            $("#end_id").show();
        }

        $(document).on('keydown', function(event) {
            if (event.which === 32) {
                startTimer();
                var rest_time = 60*5

                var time_baseline = 1000*20
                var time1 = time_baseline+1000*rest_time
                var time2 = time1+time_baseline
                var time3 = time2+1000*rest_time


                socket.emit("play_cue_tone", {signal:"open_eyes"});

                setTimeout(function () {socket.emit("data_acq", {label: 0});}, time_baseline)
                setTimeout(function () {socket.emit("play_cue_tone", {signal:"close_eyes"});}, time1)

                setTimeout(function () {socket.emit("data_acq", {label: 1});}, time2)
                setTimeout(function () {socket.emit("play_cue_tone", {signal:"end"});}, time3)

            }
        });




    </script>
</html>